<%@include file="_header.jsp"%>



<!-- File tree and JSP controller -->
<link href="js/jqueryFileTree/jqueryFileTree.css" rel="stylesheet" type="text/css" media="screen" />
<script src="js/jqueryFileTree/jqueryFileTree.js" type="text/javascript"></script>


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>32Learn</title>
</head>
<body>
    <c:choose>
        <c:when test="${userLevel != 2 && userLevel != 3}">
            <%@include file="errorPage.jsp"%>
        </c:when><c:otherwise>
            <%@include file="_menu.jsp"%>

            <div class="sidebar">

                <div class="redbar"><a href="#"><div id="bar-textcontent">${inhoud.courseViewT6}</div></a>
                </div>
                <div id="sidescreen">

                    <ul class="thumbnails">
                        <li class="span4">
                            <div class="thumbnail">
                                <h3>${inhoud.courseViewT6}</h3>
                                <img src="icons/Manage_users.png" alt="">

                                <p></p>
                            </div>
                        </li>
                        <div class="insertext-thumbnail">
                            ${inhoud.manageDocsT}
                        </div>
                    </ul>


                </div>



            </div>

            <div class="wrappermain">


                <div class="digitalclass">
                    <div id="subheader"><div id="bar-textcontent">${inhoud.courseViewT6}</div>  </div>






                    <div class="main-digital">

                        <table class="tablesorter">
                            <thead>
                                <tr>
                                    <th>${inhoud.changeCourseT}:</th>
                                    <th>${inhoud.changeCourseT2}:</th>
                                    <th>${inhoud.changeCourseT3}:</th>
                                </tr> 
                            </thead> 
                            <tbody>            
                                <c:forEach var="course" items="${courses}">     
                                    <tr trId="${course.courseID}">
                                        <td>${course.courseName} </td>
                                        <td>${course.courseDescription} </td>
                                        <td>${course.courseLanguage} </td>

                                    </tr>

                                </c:forEach>
                            </tbody> 
                        </table>

                        <div id="fileMenu" style="visibility:hidden;">
                            <table width="100%">
                                <tr>
                                    <td width="50%" style="text-align:left;">
                                        <form action="manage_documents" method="POST" enctype="multipart/form-data">
                                            <input id="uploadbutton" type="button" class="btn btn-info" value="Upload document">
                                            <progress style="visibility: hidden;"></progress>
                                            <input style="display: none;" type="file" id="file" name="file" size="1"/>
                                        </form>
                                    </td>
                                    <td width="50%" style="text-align:right; vertical-align: top;">
                                        <input type="button" class="btn" value="New Folder" onclick="newFolder();"> 
                                        <input type="button" class="btn" value="Rename" onclick="renameFiles();"> 
                                        <input type="button" class="btn btn-danger" value="Delete" onclick="deleteFiles();">
                                    </td>
                                </tr>
                            </table>
                        </div>          
                        <div id="fileTree"></div>
                        <script language="javascript">
                            var currentRow;

                            $(document).ready( function() {
                                $.tablesorter.defaults.widgets = ['zebra']; 
                                $(".tablesorter").tablesorter(); 
                                var previousTr;
                                var mode = "even";
    
                                $(".tablesorter tr").click( function() { 
                                    if(previousTr){
                                        previousTr.children('td, th').css('background-color','');
                                        previousTr = $(this);
                                    } else {
                                        previousTr = $(this);
                                    }
                                    $(this).children('td, th').css('background-color','#e9322d');
                                    currentRow = $(this).attr("trID");
                                    createFileTree();    
                                    $('#fileMenu').css('visibility','visible');
                                });  
    
    
                                $("#uploadbutton").click(function () {
                                    $("#file").trigger('click');
                                });  
    
    
                                $("#file").change(function () {
                                    var formData = new FormData($('form')[0]);
                                    $('progress').css('visibility','visible');
                                    $.ajax({
                                        url: 'manage_documents?ID='+currentRow,  //server script to process data
                                        type: 'POST',
                                        xhr: function() {  // custom xhr
                                            myXhr = $.ajaxSettings.xhr();
                                            if(myXhr.upload){ // check if upload property exists
                                                myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload
                                            }
                                            return myXhr;
                                        },
                                        //Ajax events
                                        success: function(data) { 
                                            $('progress').attr({value:0,max:100}); 
                                            $('progress').css('visibility','hidden');
                                            setTimeout(function(){ createFileTree();}, 500);
                                        },
                                        error: function() { alert('Error uploading file'+data); },
                                        // Form data
                                        data: formData,
                                        //Options to tell JQuery not to process data or worry about content-type
                                        cache: false,
                                        contentType: false,
                                        processData: false
                                    });
                                });
                            });

                            function progressHandlingFunction(e){
                                if(e.lengthComputable){
                                    $('progress').attr({value:e.loaded,max:e.total});
                                }
                            }

                            function createFileTree(){
                                $('#fileTree').fileTree({
                                    root: currentRow,
                                    script: 'jqueryFileTree.jsp',
                                    expandSpeed: 300,
                                    collapseSpeed: 300,
                                    multiFolder: false,
                                    checkboxes: true
                                }, function(file) {
                                    location.href='documents/'+file;
                                }); 
                            }

                            function deleteFiles(){
                                if(confirm("Weet u zeker dat u deze bestanden wilt verwijderen?") == true){
                                    $('#fileTree ul > li div input').each(function(){ 
                                        if($(this).is(':checked')){
                                            var data = $(this).attr('value');
                                            $.get("manage_documents?action=delete&file="+encodeURIComponent(data), function (data) { });
                                        }
                                    })
                                    setTimeout(function(){ createFileTree();}, 500);    
                                }
                            }

                            function renameFiles(){
                                $('#fileTree ul > li div input').each(function(){ 
                                    if($(this).is(':checked')){
                                        var data = $(this).attr('value');
                                        var split = data.split('/');
                                        var ID = split[0];
                                        var fileName = split.slice(1).join("/");            
                                        var renameTo = prompt("Vul de nieuwe bestandsnaam in: ",fileName);
                                        if(renameTo != null){
                                            $.get("manage_documents?action=rename&ID="+ID+"&file="+encodeURIComponent(data)+"&target="+encodeURIComponent(ID+"/"+renameTo), function (data) { });
                                        }
                                    }
                                })
                                setTimeout(function(){ createFileTree();}, 500);    
                            }

                            function newFolder(){
                                var newFolder = prompt("Vul de naam van de nieuwe folder in:","");
                                if(newFolder != null){
                                    alert("manage_documents?action=newFolder&file="+encodeURIComponent(currentRow+"/"+newFolder));
                                    $.get("manage_documents?action=newFolder&file="+encodeURIComponent(currentRow+"/"+newFolder), function (data) { });
                                    setTimeout(function(){ createFileTree();}, 500); 
                                }

                            }
                        </script>
                    </div>
                </div>
            </div>

        </c:otherwise></c:choose>
</body>
</html>
